<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="APP name">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="default">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>审核不通过原因</title>
    <link rel="stylesheet" type="text/css" href="css/reason.css"/>
    <link rel="stylesheet" type="text/css" href="js/layer/need/layer.css"/>
</head>

<body>
    <div class="container">
       <div class="reason-title">选择不通过原因：</div>
       <ul id="chose-reason">
       		<li data-click="false">
       			<div class="li-con">
       				<img src="img/no_chosed.png"/>
       				<span>身份证头像面照片不清晰；</span>
       			</div>
       		</li>
       		<li data-click="false">
       			<div class="li-con">
       				<img src="img/no_chosed.png"/>
       				<span>身份证国徽面照片不整齐；</span>
       			</div>
       		</li>
       		<li data-click="false">
       			<div class="li-con">
       				<img src="img/no_chosed.png"/>
       				<span>储蓄卡正面照片不清晰；</span>
       			</div>
       		</li>
       		<li data-click="false">
       			<div class="li-con">
       				<img src="img/no_chosed.png"/>
       				<span>手持身份证和储蓄卡，卡片内容不清晰；</span>
       			</div>
       		</li>
       		<li data-click="false">
       			<div class="li-con">
       				<img src="img/no_chosed.png"/>
       				<span>手持身份证和储蓄卡，卡片内容出现镜像，请使用后置摄像头拍摄；</span>
       			</div>
       		</li>
       </ul>
       <div class="reason-title">其他不通过原因：</div>
       <textarea class="re-area" name="" rows="7" cols="10" placeholder="请输入其它不通过原因"></textarea>
       <div class="comfirm" id="comfirm">确认</div>
    </div>
	<script type="text/javascript" src="js/jquery-1.10.1.min.js" ></script>
	<script type="text/javascript" src="js/layer/layer.js" ></script>
    <script>
        $(function(){
        	$("#chose-reason li").click(function(){
        		var status = $(this).data('click');
        		if(status){
        			$(this).find('img').attr('src','img/no_chosed.png')
        		}else{
        			$(this).find('img').attr('src','img/chosed.png')
        		}
				$(this).data('click',!status);
        	})
        	$('#comfirm').click(function(){
        		//获取你需要的数据
        		
        		//ajax提交
        		layer_index_num = layer.open({
	                type: 2,
	                shadeClose: false,
	                content: '加载中,请您稍候...'
	            });
	            setTimeout(function(){
	            	layer.close(layer_index_num);
	            },1000)
	            setTimeout(function(){
	            	layer.open({
					    content: '提交成功'
					    ,skin: 'msg'
					    ,time: 2 //2秒后自动关闭
					});
	            },2000)
        	})
        })
    </script>
</body>
</html>